<template>
  <div>
      TODO 
      <ul>
          <li>工作量查询</li>
          <li>测试经理查询</li>
          <li>需求信息查询</li>
          <li>知识库维护</li>
          <li>--------------</li>
          <li>月版需求清单</li>
          <li>交易清单-关联高级清单</li>
          <li>投产方案文档导出</li>
          <li>短信通知导出</li>
      </ul>
    <Divider>字段过滤</Divider>
    <CheckboxGroup v-model="brInfoSelect" size="small">
      <Checkbox label="需求编号" checked></Checkbox>
      <Checkbox label="需求名称"></Checkbox>
      <Checkbox label="需求类型"></Checkbox>
      <Checkbox label="业务部门"></Checkbox>
    </CheckboxGroup>
    
    <Divider>需求信息</Divider>
    <Table border :columns="columns" :data="data">
      <template slot-scope="{ row, index }" slot="id">
        <Input type="text" v-model="editData.id" v-if="editIndex === index" />
        <span v-else>{{ row.id }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="brName">
        <Input
          type="text"
          v-model="editData.brName"
          v-if="editIndex === index"
        />
        <span v-else>{{ row.brName }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="brType">
        <Input
          type="text"
          v-model="editData.brType"
          v-if="editIndex === index"
        />
        <span v-else>{{ row.brType }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="ywBranch">
        <Input
          type="text"
          v-model="editData.ywBranch"
          v-if="editIndex === index"
        />
        <span v-else>{{ row.ywBranch }}</span>
      </template>

      <template slot-scope="{ row, index }" slot="actions">
        <div v-if="editIndex === index">
          <Button @click="handleSave(index)">保存</Button>
          <Button @click="editIndex = -1">取消</Button>
        </div>
        <div v-else>
          <Button @click="handleEdit(row, index)">操作</Button>
        </div>
      </template>
    </Table>
  </div>
</template>
<script>
// 表格增加列  先brInfoSelect增加列名，在column配置对应列名的英文ID，在template配置对应的ID，同时增加CheckboxGroup中的选项
export default {
  data() {
    return {
      brInfoSelect: ["需求编号", "需求名称", "需求类型", "业务部门"],
      editIndex: -1, // 当前聚焦的输入框的行数
      editData: {},
      data: [
        {
          id: "X20200902000009",
          brName: "关于校验汇兑凭证号码的业务需求书",
          brType: "维护类需求",
          ywBranch: "运营管理部",
        },
        {
          id: "X20200902000010",
          brName: "关于校验汇兑凭证号码的业务需求书1",
          brType: "维护类需求1",
          ywBranch: "运营管理部1",
        },
      ],
      column: {
        需求编号: "id",
        需求名称: "brName",
        需求类型: "brType",
        业务部门: "ywBranch",
        业务负责人: "ywName",
        科技负责人: "kjName",
        柜面牵头: "gmFlag",
        柜面负责人: "gmName",
        分配厂商: "csBranch",
        开发人员: "csName",
        测试经理: "testBranch",
        测试人员: "testName",
        购物车: "gwcFlag",
        无纸化: "wzhFlag",
        电子印章: "dzyzFlag",
        无纸化: "wzhFlag",
        TWS: "twsFlag",
        GTP: "gtpFlag",
        定时任务: "timmerFlag",
        SQL: "sqlFlag",
        涉及系统: "otherBranch",
        工作量: "workCount",
        当前进度: "process",
        计划投产时间: "planTime",
        实际投产时间: "realTime",
      },
    };
  },
  methods: {
    handleEdit(row, index) {
      for (var item in this.data[index]) {
        this.editData[item] = this.data[index][item];
      }
      this.editIndex = index;
    },
    handleSave(index) {
      for (var item in this.editData) {
        this.data[index][item] = this.editData[item];
      }
      // TODO 更新数据库
      this.editIndex = -1;
    },
  },
  computed: {
    columns() {
      // 读取选项，组合表格选项
      var res = [];
      for (var i in this.brInfoSelect) {
        // console.log(i);
        res.push({
          title: this.brInfoSelect[i],
          slot: this.column[this.brInfoSelect[i]],
        });
      }
      // console.log(res);
      res.push({
        title: "操作",
        slot: "actions",
      });
      return res;
    },
  },
};
</script>